import {  Col, Row,  Popover, Button, Divider  } from 'antd';
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
import {useEffect, useState} from "react";
import {createData, getData} from "../utils/handleLocal";
import CommonModal from "./modalForm";
import {cardListSchema} from "../utils/schema";
import {cardList} from "../utils/initData";

const Cards = ({setData}) => {
    const [cardList, setCardList] = useState([])
    useEffect(() => {
        setCardList(getData('cardList'))
        console.log(cardList)
    }, [])

    const toMyFiv = (url) => setData.tagOpenNewPage === 'true' ? window.open(url,'_blank') : window.location = url

    return(
        <div >
            <Divider orientation="left">我的收藏</Divider>
            <Row gutter={24}>
                {
                    cardList.map(item => {
                        return(
                            <Col span={2} style={{ display:'flex', justifyContent: 'center', alignItems: 'center', }}  key={item.id}>
                                <Popover content={item.content} title={item.title}>
                                    <Button type="primary" shape={'round'} onClick={() => toMyFiv(item.url)} >{item.title}</Button>
                                </Popover>
                            </Col>
                        )
                    })
                }
                <CommonModal data={ cardListSchema }/>
            </Row>
        </div>
    )
}

export default Cards
